<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GameBar</title>
    <script src="vue.js"></script>
    <script src="zquery.js"></script>
    <link rel="stylesheet" href="gamebar.css">
</head>

<body style="background-color: black;">
    <div id="app">
        <div class="app-container" v-if="state!=null">
            <div class="statusbar">
                <div style="width: 8px;"></div>
                <div class="timetext">{{state.time}}</div>
                <div class="flexgrow"></div>
                <template v-if="state.battery.hasBattery">
                    <img src="battery.png" width="24"></img>
                    <div class="batterytext">{{state.battery.percentage}}</div>
                    <img src="countdown.png" width="24"></img>
                    <div class="batterytext">{{state.battery.remainTime}}</div>
                </template>
                <div style="width: 8px;"></div>
            </div>
            <div class="powerarea1 powerarea">
                <div class="powertext">
                    <span style="font-size: 64px;">{{state.tdp}}</span>
                    <span style="font-size: 28px;">w</span>
                </div>
                <div class="powertext">
                    <span style="font-size: 40px;">{{state.gpu}}</span>
                    <span style="font-size: 24px;">MHz</span>
                </div>
            </div>
            <div class="powerarea2 powerarea">
                <div>
                    TDP限制
                </div>
                <div>
                    GPU频率
                </div>
            </div>

            <div class="modepanel">
                <div>
                    <div class="modebutton" :class="{'modebutton-active':state.autoMode}" @click="doApi('api/auto')">自动调整</div>
                    <div class="modebutton" :class="{'modebutton-active': !state.autoMode}" @click="doApi('api/manual')">手动调整</div>
                </div>
            </div>

            <div class="title">
                <p class="title-left" v-if="state.autoMode">当前场景</p>
                <p class="title-left" v-else>电源预设</p>
                <div class="flexgrow"></div>
                <a href="javascript:void(0)" v-if="state.autoMode" @click="confirmApi('是否打开管理页面','api/openui')">管理场景</a>
                <a href="javascript:void(0)" v-else @click="confirmApi('是否打开管理页面','api/openui')">管理预设</a>
            </div>

            <div class="flexgrow main-model">
                <div class="scene-model" v-if="state.autoMode">
                    <div class="scene-main" v-if="state.scene != null">
                        <div class="scene-name single-line">{{state.scene.DisplayName}}</div>
                        <div class="scene-divider"></div>
                        <div class="scene-tdp-info-container">
                            <div class="scene-tdp-info">
                                <div class="scene-tdp-info-left">
                                    <div>TDP:</div>
                                    <div>GPU:</div>
                                </div>
                                <div class="scene-tdp-info-right">
                                    <div>{{state.scene.Tdp}}w</div>
                                    <div>{{state.scene.Gpu}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="scene-empty" v-else>无场景</div>
                    <div class="scene-action">
                        <a href="javascript:void(0)" v-if="state.scene != null" @click="confirmApi('是否删除此场景？','api/delscene')">删除场景</a>
                        <a href="javascript:void(0)" v-else @click="doApi('api/addscene')">添加当前游戏为场景</a>
                    </div>

                </div>

                <div class="manual-model" v-else>
                    <template v-for="item in state.quicks">
                        <div class="manual-mode-button "
                            :class="{'manual-mode-button-active':(item.Tdp == state.tdp && item.Gpu == state.gpu)}"
                            @click="doApi('api/tdp?tdp='+item.Tdp+'&gpu='+item.Gpu)">
                            {{item.Tdp}}w<br />{{item.Gpu}}
                        </div>
                    </template>
                </div>
            </div>

            <div class="title">
                <p class="title-left" v-if="state.autoMode && state.scene != null">场景功耗</p>
                <p class="title-left" v-else>调整功耗</p>
                <div class="flexgrow"></div>
            </div>

            <div class="adjustment">
                <p>TDP:</p>
                <div class="button" @click="doApi('api/tdp?tdp='+(state.tdp - 1))">-</div>
                <div class="button" @click="doApi('api/tdp?tdp='+(state.tdp + 1))">+</div>
            </div>
            <div class="adjustment">
                <p>GPU:</p>
                <div class="button" @click="doApi('api/tdp?gpu='+(state.gpu - 50))">-</div>
                <div class="button" @click="doApi('api/tdp?gpu='+(state.gpu + 50))">+</div>
            </div>
            <div class="title">
                <p class="title-left">正在运行</p>
                <div class="flexgrow " style="padding-left: 12px;">
                    <div class="single-line" style="width: 190px;">
                        {{state.processTitle}}
                    </div>
                </div>
            </div>

            <div class="exitgame">
                <div class="button-red button"  @click="confirmApi('是否退出当前游戏？游戏的进度可能会丢失。','api/altf4')">退出当前游戏</div>
            </div>
        </div>
        <div v-if="err" class="error">
            小组件后端出现异常
        </div>
        <div class="alertmask" v-if="showModal"></div>
        <div class="alertdialog" v-if="showModal">
            <div class="dialoginner">
                <div>{{modal.message}}</div>
            </div>
            <div class="dialogbuttons">
                <button @click="showModal = false" class="dialogbutton" >{{ modal.isErrMsg ? 'Close' : 'No' }}</button>
                <button v-if="!modal.isErrMsg" @click="()=>{doApi(modal.actionurl);showModal=false;}" class="dialogbuttondanger dialogbutton" >Yes</button>
            </div>
        </div>
    </div>
    <script>


        var app = new Vue({
            el: "#app",
            data: {
                state: null,
                isLoading: false,
                err: false,
                showModal:false,
                modal:{
                    message:"state",
                    actionurl:"api/wdata",
                    isErrMsg:false,
                }
            },
            methods: {
                updateData() {
                    this.isLoading = true;
                    $.ajax("api/wdata", {}).then(res => {
                        var data = JSON.parse(res);
                        if (data.code == 200) {
                            this.state = data.data;
                            console.log(data.data);
                            this.isLoading = false;
                        }
                        else {
                            throw "错误";
                        }

                    }).catch(err => {
                        this.state = null;
                        this.err = true;
                    });
                },
                
                doApi(url){
                    if(this.isLoading){
                        return;
                    }
                    this.isLoading = true;
                    $.ajax(url).then(res => {
                        var data = JSON.parse(res);
                        if (data.code == 200) {
                            this.updateData();
                        }
                        else {
                            throw data.msg;
                        }

                    }).catch(err => {
                        this.showErr(err);
                    });
                },

                confirmApi(msg,api){
                    this.modal.message = msg;
                    this.modal.actionurl = api;
                    this.showModal = true;
                    this.isErrMsg = false;
                },

                showErr(msg){
                    
                    this.modal.message = "出现错误："+msg;
                    this.showModal = true;
                    this.modal.isErrMsg = true;
                }
            },
            mounted() {
                this.updateData();
            },
        });



        
        var shouldReload = true;
        var reloadInterval = 2000;

        var reloadFunc = ()=>{
            if(!app.isLoading){
                app.updateData();
            }
            
            if(shouldReload){
                setTimeout(reloadFunc, reloadInterval);
            }
        };

        reloadFunc();

        function onPause(){
            shouldReload = false;
        }

        function onResume(){
            shouldReload = true;
            reloadFunc();
        }
    </script>


</body>

</html>